<template lang="pug">
.footer_content
    .friendsLink
        div
            a(v-for="(item,index) in friendsLink" :href="item.url")
                img(:src="item.logo")

        .footer_logo
            img(src="../../../public/logo.png" , alt="EmpShop Software")

    .spilt

    .resource_links
        span(v-for="(item,index) in resource_links") {{item}}

    .spilt

    .footer_text © 2023, EmpShop Games, Inc. All rights reserved. EmpShop, EmpShop Games, the EmpShop Games logo, Fortnite, the Fortnite logo, Unreal, Unreal Engine, the Unreal Engine logo, Unreal Tournament, and the Unreal Tournament logo are trademarks or registered trademarks of EmpShop Games, Inc. in the United States of America and elsewhere. Other brands or product names are the trademarks of their respective owners.
    .spilt
    .service_links
        span(v-for="(item,index) in serviceLink") {{item.title}}

</template>

<script setup lang="ts">


import {ref} from "vue";

const logoImg = ref("../../../public/logo.png")
const resource_links = [
    "Battle Breakers",
    "Fall Guys",
    "Fortnite",
    "Infinity Blade",
    "Robo Recall",
    "Rocket League",
    "Shadow Complex",
    "Unreal Tournament",

]
const friendsLink = [
    {
        title: "Steam",
        url: "https://store.steampowered.com/",
        logo: 'https://store.cloudflare.steamstatic.com/public/shared/images/responsive/header_logo.png'
    },
    {
        title: "EmpShop",
        url: "https://store.EmpShopgames.com/en-US/",
        logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgJMgQSbbF2KEao5dc91zfPCX8GRyG9YvLWilNdRPm-mF2qtNduKqg&usqp=CAE&s'
    },

]
const serviceLink = [
    {
        title: "Terms of Service",
        url: "https://store.steampowered.com/",
    },
    {
        title: " Privacy Policy",
        url: "https://store.EmpShopgames.com/en-US/",
    }, {
        title: "Store Refund Policy",
        url: "https://store.EmpShopgames.com/en-US/",
    },

]


</script>
<style scoped lang="sass">
.spilt
  height: 10px
  background: #2d2d2d

.footer_content
  display: flex
  width: 100%
  padding-top: 20px
  background: #1a1a1a
  flex-direction: column
  color: #e5e5e5

  .friendsLink
    display: flex
    flex-direction: row
    padding: 10px 0 20px 0
    align-items: center
    justify-content: space-between

  .footer_logo
    float: right
    padding-top: 2px

  .footer_text
    width: 60%
    margin: 20px
    padding: 10px 0 10px 0
    color: silver

  .resource_links
    padding: 20px 0 10px 0
    display: flex
    width: 500px

    span
      padding: 20px
      margin-bottom: 10px
      background: #282828

      &:hover
        color: #606162

  .service_links
    padding: 10px 0 20px 0
    background: #282828

    span
      padding: 20px
      margin-bottom: 10px

      &:hover
        color: #646669

  img
    height: 50px
</style>
